$effect

在 Svelte 中我們要管理 side-effect 的行為通常就會使用 $effect 這個 rune ，首先我們先來看一個簡單的範例

先做個名詞定義，以下提到 effect 通常是指要管理 side effect 也就是 $effect 裡的 ()⇒{} 這個 function 裡面的東西，而 $effect 指的是這個 rune

<script lang="ts">
	let obj = $state({ value: 0 });

	let derivedObj = $derived({ value: obj.value * 2 });

	$effect(() => {
		console.log(`[Effect 1] obj.value: ${obj.value}`);
	});

	$effect(() => {
		console.log(`[Effect 2] obj: ${obj}`);
	});

	$effect(() => {
		console.log(`[Effect 3] derivedObj: ${derivedObj}`);
	});
</script>

<button onclick={() => (obj.value += 1)}> Increment obj.value </button>
<button onclick={() => (obj = {...obj,value: obj.value + 1})}> Increment obj.value (immutable)</button>

<p class="content">{obj.value} doubled is {derivedObj.value}</p>

從上面的影片我們可以看出四個小細節

1. $effect 在第一次渲染時會先執行一次

2. $effect 會自動追蹤依賴，有使用到的 $state 或者 $derived 更新時會再次執行

3. 如果是變更其中一個 property 的話，對於${obj} 這種使用整個 object 的形式並不會有 reactive

4. 如果是 immutable update 因為是整個 object 被替換掉所以 [Effect 2] 可以被觸發到

cleanup

這裡為了方便示範，先把倒數計時的部分抽成一個 component，而在 $effect 中 return 的 function 就是所謂的 cleanup function。

執行的時機為下次 effect 執行前會先執行一次 cleanup 以及 component destroy (unmounted) 前會先執行。

<!-- in Counterdown.svelte  -->
<script lang="ts">
	let count = $state(0);

	$effect(() => {
		console.log('Starting interval');
		const id = setInterval(() => {
			count += 1;
		}, 1000);
		return () => {
			console.log('Clearing interval');
			clearInterval(id);
		};
	});
</script>

{count}

再次說明 Svelte 中每個 .svelte 的檔案都是一個 component

<!-- in +page.svelte  -->
<script lang="ts">
	import Countdown from './Countdown.svelte';
  	let showCountdown = $state(false);
</script>

<div>
	<button onclick={() => (showCountdown = !showCountdown)}>
		{showCountdown ? 'Hide' : 'Show'} Countdown
	</button>
</div>
{#if showCountdown}
	<Countdown />
{/if}

而要使用 component 就是 import 該 .svelte 的 default export ，至於其他關於 component 的細節就留待以後文章再來說明。

從影片中看得出來，第一次 render 時會有 Starting interval 而當我按下按鈕後就會將 <Countdown /> destroy 也就觸發了 cleanup function

有些讀者或許會想問為什麼 console.log('Starting interval'); 沒有每秒都被執行，回到前面例子的我們提到的「$effect 會自動追蹤依賴，有使用到的 $state 或者 $derived 更新時會再次執行」。

但在這個例子中因為我沒有在 $effect 的 function 中直接使用到 count 而是只有在 setInterval 的 callback 中使用，所以並不會被 $effect 自動追蹤到依賴。

$effect.pre

在 Svelte 我們是能將 effect 的執行時機提前在 DOM 更新前的，就是使用 $effect.pre 這個 rune。

<!-- in Counter.svetle -->
<script lang="ts">
	let obj = $state({ value: 0 });

	let derivedObj = $derived({ value: obj.value * 2 });
	let p: HTMLParagraphElement| null = $state(null);

	$effect.pre(() => {
		console.log(
			'\x1b[36m%s\x1b[0m',
			`[Pre Effect]\n`,
			`p.innerText: ${p?.innerText} \n obj.value: ${obj.value}`
		);
		return () => {
			console.log(
				'\x1b[36m%s\x1b[0m',
				`[Pre Effect Cleanup]\n`,
				`p.innerText: ${p?.innerText} \n obj.value: ${obj.value}`
			);
		};
	});

	$effect(() => {
		console.log('\x1b[32m%s\x1b[0m', `[Effect 1]\n`, `obj.value: ${obj.value}`);
		return () => {
			console.log('\x1b[32m%s\x1b[0m', `[Effect 1 Cleanup]\n`, `obj.value: ${obj.value}`);
		};
	});
</script>

<button onclick={() => (obj.value += 1)}> Increment obj.value </button>
<button
	onclick={() =>
		(obj = {
			...obj,
			value: obj.value + 1
		})}
>
	Increment obj.value (immutable)</button
>

<p class="content" bind:this={p}>{obj.value} doubled is {derivedObj.value}</p>

'\x1b[36m%s\x1b[0m' 之類的東西是將 console 的字上色用的

這邊我們先用bind:this 這個 directives 來輔助說明，簡單來說它的功用就是可以獲得 DOM node 。

<!-- in +page.svelte  -->
<script lang="ts">
	import Counter from './Counter.svelte';

	let showCounter = $state(true);
</script>

<div>
	<button onclick={() => (showCounter = !showCounter)}>
		{showCounter ? 'Hide' : 'Show'} Counter
	</button>
</div>
{#if showCounter}
	<Counter />
{/if}

我們可以發現重新整理後會先出現 [Pre Effect] 然後才是 [Effect 1] ，這是因為 $effect.pre 是會在 DOM 更新前先行觸發，而此刻 <p> 還沒出現在 DOM 上，所以 p.innerText 會是 undefined 而 obj.value 是 0 是因為這個 state 的預設值是 0

[Pre Effect] 
p.innerText: undefined 
obj.value: 0

然後 DOM 更新完後 $effect 觸發了

[Effect 1] 
p.innerText: 0 doubled is 0 
obj.value: 0

因為對於 $effect.pre 來說 p?.innerText 從 undefined 變成有值了所以會再次觸發 $effect.pre ，但在執行 $effect.pre 的 effect 前會先執行它的 cleanup。

[Pre Effect Cleanup]
p.innerText: 0 doubled is 0 
obj.value: 1

[Pre Effect]
p.innerText: 0 doubled is 0 
obj.value: 1

所以初次渲染最後順序才會是 [Pre Effect] → [Effect 1] → [Pre Effect Cleanup] → [Pre Effect]

接下來按了按鈕狀態更新後，在因為 obj.value 更新了所以 DOM 更新前會先執行 $effect.pre

[Pre Effect Cleanup]
p.innerText: 0 doubled is 0 
obj.value: 1

[Pre Effect]
p.innerText: 0 doubled is 0 
obj.value: 1

每次 effect 執行前會先執行它的 cleanup

之後 DOM 更新完成了，就開始執行 $effect

[Effect 1 Cleanup]
p.innerText: 1 doubled is 2 
obj.value: 1

[Effect 1]
p.innerText: 1 doubled is 2 
obj.value: 1

然後將 Counter destroy 就觸發了 $effect 以及 $effect.pre 的 cleanup

[Pre Effect Cleanup]
 p.innerText: 1 doubled is 2 
 obj.value: 1

[Effect 1 Cleanup]
 p.innerText: 1 doubled is 2 
 obj.value: 1

之後再 mount 一次就會跟第一次掛載的順序一樣。

小結

1. $effect 它是在 component 在 DOM 上渲染後執行，並會在使用到 $state 或$derived 的值更新後再次重新執行

2. $effect.pre 也是在使用到 $state 、 $derived 的值更新後重新執行，只是執行時機是在 DOM 渲染前

3. cleanup 是會在每次 effect 執行前先執行以及會在 destroy (unmount) 時執行

雖然不是每個狀態的變更都會重新渲染 DOM ，所以$effect 和 $effect.pre 用 DOM 渲染前後作為分界點只是為了好想像。

明天將會繼續說明 $effect 的其他行為以及把 rune 這個篇章做個收尾，原本以為 rune 是一天就講得完，但深入研究一下才發現 $effect 比想像中的複雜很多QQ

參考資料

1. https://svelte.dev/docs/element-directives#bind-this
2. https://svelte-5-preview.vercel.app/docs/runes
3. https://sveltekit.io/blog/svelte-5#the-untrack-function

source code

https://github.com/toddLiao469469/30days-for-svelte5/tree/main/src/routes/day05